<template>
    <div class="bod">
        <div class="welcome">
            <p class="logo-name">一程</p>
            <p class="wel">欢迎你</p>
        </div>
        <form action="" class="regist-form">
            <input type="text" placeholder="请输入用户名" v-model="registerForm.account"><br>
            <input type="password" placeholder="请输入密码" v-model="registerForm.password"><br>
            <input type="button" value="立即注册" class="toRegist" @click="onSubmit">
        </form>
    </div>
    
</template>
<script>
export default {
    data () {
        return {
            registerForm:{
                account:"",
                password:""
            }
        }
    },
    methods: {
        onSubmit(){
            const _this=this
            this.$store.commit("ADDACCOUNT",this.registerForm)
            this.$notify({
                type: "success",
                message: "注册成功！跳转到登录页",
                duration: 1500,
                onClick() {
                     _this.$router.push("/login");
                },
                onClose() {
                     _this.$router.push("/login");
                },
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.bod{
    height: 100vh;
    overflow: hidden;
    // background-image:linear-gradient(
    //     #f07676 0%,
    //     #f7e1e4 6%,
    //     #f4f4f4 100%
    // );
    background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
    .welcome{
        margin-top: 70px;
        margin-left: 50px;
        position: relative;
        .logo-name{
            font-size: 36px;
            color: #f07676;
            // text-align: left;
            text-align: left;
            margin: 0;
            font-weight: 600;
        }
        .wel{
            position: relative;
            left: 40px;
            text-align: left;    
            margin: 0;
            color: #f07676;
            font-weight: 500;
        }
    }
    .regist-form{
        margin: 60px 0;
        text-align: center;
        input{
            margin: 10px auto;
            width: 180px;
            height: 30px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid #f07676;
            // color: #f07676;
            
        }
        input::-webkit-input-placeholder{
            color: #f07676;
        }
        .toRegist{
            background-color: #f07676;
            color: white;
            border-radius: 10px;
        }
    }
}
</style>